<template>
  <div class="dataCenter">
    <div class="MyMap" id="MyMap"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const vmap = ref(null)
// const polygon = ref(null)
AMapLoader.reset()
AMapLoader.load({
  key: "95030e84ef730b13f841198d93627fe7", // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
  .then((AMap) => {
    vmap.value = new AMap.Map("MyMap", {
      //设置地图容器id
      resizeEnable: true,
      rotateEnable:true,
      pitchEnable:true,
      zoom: 17,
      // pitch:80,
      // rotation:-15,
      viewMode:'3D',//开启3D视图,默认为关闭
      buildingAnimation:true,//楼块出现是否带动画
      expandZoomRange:true,
      zooms:[3,20],
      // center:[116.333926,39.997245]
      // mapStyle: "amap://styles/darkblue"
    });
    setPolygon(AMap)
  })
  .catch((e) => {
    console.log(e);
  });

  const setPolygon = (AMap) => {
    AMap.plugin(["AMap.ToolBar", "AMap.Geolocation"], () => {
      const toolbar = new AMap.ToolBar();
      vmap.value.addControl(toolbar);
      const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'RB',    //定位按钮的停靠位置
            offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        vmap.value.addControl(geolocation);
    //   new AMap.DistrictSearch({
    //     extensions: "all",
    //   }).search("武汉市", function (status, result) {
    //       // 外多边形坐标数组和内多边形坐标数组
    //       const outer = [
    //         new AMap.LngLat(-360, 190, true),
    //         new AMap.LngLat(-360, -190, true),
    //         new AMap.LngLat(360, -90, true),
    //         new AMap.LngLat(360, 90, true),
    //       ];
    //       const holes = result.districtList[0].boundaries;
    //       const pathArray = [outer];
    //       console.log(pathArray, holes)
    //       // pathArray.push(...pathArray, ...holes);
    //       const polygon = new AMap.Polygon({
    //         pathL: pathArray,
    //         strokeColor: "#ccc",
    //         strokeWeight: 1,
    //         fillColor: "#F2F2F2",
    //         fillOpacity: 1,
    //       });
    //       polygon.setPath(pathArray);
    //       vmap.value.add(polygon);
    //   })
    })
  }
</script>

<style lang="stylus" scoped>
.dataCenter
  background-color: #fff
  height 100%
  // width 200px
  .MyMap
    height 100%
    width 100%
</style>
